<template>
    <div class='fxn-body'>
        <div class="fxn-search">

        </div>
        <!-- Search End -->
        <div class="fxn-section">
            <el-table :loading="loading" :data="listData">
                <el-table-column label="员工" prop="create_user_id" />
                <el-table-column label="登录状态" prop="type" />
                <el-table-column label="登录时间" prop="create_time" />
                <el-table-column label="登录IP" prop="ip" />
                <el-table-column label="登录地址" prop="address" />
                <el-table-column label="浏览器" prop="browser" />
                <el-table-column label="系统" prop="os" />
            </el-table>
        </div>
        <!-- Section End -->
        <div class="fxn-page fixed">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page" :page-sizes="[10, 50, 100, 250, 500]" :page-size="limit" layout="total, sizes, prev, pager, next, jumper" :total="count"></el-pagination>
        </div>
        <!-- Page End -->
    </div>
</template>

<script>
    import { defineComponent, reactive, getCurrentInstance, onMounted, toRefs, computed } from 'vue'
    import { useRouter } from 'vue-router'
    import { useStore } from 'vuex'
    export default defineComponent({
        name: '',
        setup() {
            const { proxy } = getCurrentInstance();
            const router = useRouter();
            const store = useStore();

            //初始化数据
            const state = reactive({
                count: 0,
                page: 1,
                limit: 10,
                loading: false,
                listData: [],
            })

            //列表
            const getList = () => {
                state.loading = true;
                proxy.$http.post('/api/user/loginlog',{
                    page: state.page,
                    limit: state.limit,
                })
                .then(res=> {
                    state.loading = false;
                    const { code, msg ,data } = res;
                    if(code != 200){
                        proxy.$message.error(msg);
                    }else{
                        state.count = data.count;
                        state.listData = data.list;
                    }
                })
            }

            //分页
            const handleSizeChange = (val) => {
                state.limit = val;
                getList(state.page,state.limit);
            }

            //页码
            const handleCurrentChange = (val) => {
                state.page = val;
                getList(state.page,state.limit);
            }
            
            //Dom加载
            onMounted(()=>{
                getList();
            })
            
            return {
                ...toRefs(state),
                
                //请求方法
                getList,
                
                //组件方法
                handleSizeChange,
                handleCurrentChange,
            }

        },
    })
</script>

<style scoped>
    
</style>